<template>
  <div class="el-picker-panel__body">
    <div class="el-picker-panel__content el-date-range-picker__content is-left">
      <div class="el-date-range-picker__header">
        <button
          type="button"
          @click="leftPrevYear"
          class="el-picker-panel__icon-btn el-icon-d-arrow-left"
        ></button>
        <div>{{ leftLabel }}</div>
      </div>
      <year-table
        selection-mode="range"
        :range-state="rangeState"
        :cell-class-name="cellClassName"
        :min-date="minDate"
        :max-date="maxDate"
        :default-value="defaultValue ? new Date(defaultValue) : null"
        :date="leftDate"
        :disabled-date="disabledDate"
        @changerange="handleChangeRange"
        @pick="handleYearPick"
      ></year-table>
    </div>
    <div class="el-picker-panel__content el-date-range-picker__content is-right">
      <div class="el-date-range-picker__header">
        <button
          type="button"
          @click="rightNextYear"
          class="el-picker-panel__icon-btn el-icon-d-arrow-right"
        ></button>
        <div>{{ rightLabel }}</div>
      </div>
      <year-table
        selection-mode="range"
        :range-state="rangeState"
        :cell-class-name="cellClassName"
        :min-date="minDate"
        :max-date="maxDate"
        :default-value="defaultValue ? new Date(defaultValue) : null"
        :date="rightDate"
        :disabled-date="disabledDate"
        @changerange="handleChangeRange"
        @pick="handleYearPick"
      ></year-table>
    </div>
  </div>
</template>

<script>
import {
  formatDate,
  parseDate,
  isDate,
  modifyDate,
  modifyTime,
  modifyWithTimeString,
  prevYear,
  nextYear,
  prevMonth,
  nextMonth,
  nextDate,
  extractDateFormat,
  extractTimeFormat
} from "element-ui/src/utils/date-util";
import Locale from "element-ui/src/mixins/locale";
import yearTable from "./year-table1";
const calcDefaultValue = defaultValue => {
  if (Array.isArray(defaultValue)) {
    return [new Date(defaultValue[0]), new Date(defaultValue[1])];
  } else if (defaultValue) {
    return [new Date(defaultValue), nextMonth(new Date(defaultValue))];
  } else {
    return [new Date(), nextMonth(new Date())];
  }
};
export default {
  components: { yearTable },
  mixins: [Locale],
  props: {
    visible: {
      type: Boolean
    }
  },
  data() {
    return {
      unlinkPanels: false,
      leftDate: new Date(),
      rightDate: nextYear(new Date(), 10),
      defaultValue: "",
      disabledDate: "",
      rangeState: {
        endDate: null,
        selecting: false,
        row: null,
        column: null
      },
      cellClassName: "",
      minDate: "",
      maxDate: ""
    };
  },
  watch: {
    visible(v) {
      if (v) {
        this.leftDate = new Date();
        this.rightDate = nextYear(new Date(), 10);
      }
    }
  },
  computed: {
    // enableYearArrow() {
    //   return (
    //     this.unlinkPanels &&
    //     this.rightYear * 12 +
    //       this.rightMonth -
    //       (this.leftYear * 12 + this.leftMonth + 1) >=
    //       12
    //   );
    // },
    rightYear() {
      return this.rightDate.getFullYear();
    },
    leftYear() {
      return this.leftDate.getFullYear();
    },
    // rightMonth() {
    //   return this.rightDate.getMonth();
    // },
    // leftMonth() {
    //   return this.leftDate.getMonth();
    // },
    leftLabel() {
      let startYear = parseInt(this.leftDate.getFullYear() / 10) * 10;
      return (
        startYear +
        this.t("el.datepicker.year") +
        " - " +
        (startYear + 9) +
        this.t("el.datepicker.year")
      );
    },
    rightLabel() {
      let startYear = parseInt(this.rightDate.getFullYear() / 10) * 10;
      return (
        startYear +
        this.t("el.datepicker.year") +
        " - " +
        (startYear + 9) +
        this.t("el.datepicker.year")
      );
    }
  },
  methods: {
    handleClear() {
      this.minDate = null;
      this.maxDate = null;
      this.leftDate = calcDefaultValue(this.defaultValue)[0];
      this.rightDate = nextYear(this.leftDate, 10);
      this.$emit("pick", null);
    },
    leftPrevYear() {
      this.leftDate = prevYear(this.leftDate, 10);
      this.rightDate = prevYear(this.rightDate, 10);
    },
    rightNextYear() {
      this.leftDate = nextYear(this.leftDate, 10);
      this.rightDate = nextYear(this.rightDate, 10);
    },
    handleChangeRange(val) {
      this.minDate = val.minDate;
      this.maxDate = val.maxDate;
      this.rangeState = val.rangeState;
    },

    handleYearPick(val, close = true) {
      const defaultTime = this.defaultTime || [];
      const minDate = modifyWithTimeString(val.minDate, defaultTime[0]);
      const maxDate = modifyWithTimeString(val.maxDate, defaultTime[1]);
      if (this.maxDate === maxDate && this.minDate === minDate) {
        return;
      }
      this.onPick && this.onPick(val);
      this.maxDate = maxDate;
      this.minDate = minDate;

      setTimeout(() => {
        this.maxDate = maxDate;
        this.minDate = minDate;
      }, 10);
      if (!close) return;
      this.handleConfirm();
    },
    handleConfirm(visible = false) {
      if (this.isValidValue([this.minDate, this.maxDate])) {
        this.$emit("pick", [this.minDate, this.maxDate], visible);
      }
    },
    isValidValue(value) {
      return (
        Array.isArray(value) &&
        value &&
        value[0] &&
        value[1] &&
        isDate(value[0]) &&
        isDate(value[1]) &&
        value[0].getTime() <= value[1].getTime() &&
        (typeof this.disabledDate === "function"
          ? !this.disabledDate(value[0]) && !this.disabledDate(value[1])
          : true)
      );
    }
  }
};
</script>

<style scoped>
.el-picker-panel__body {
  display: flex;
}
</style>
